<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>🐝锋团大屏数据可视化平台</title>
    <link rel="stylesheet" href="./assets/css/m.css" />
</head>

<body>
    <!-- loading  -->
    <div class="loading" style="visibility:visible">
        <img width="120" src="./assets/imgs/loading.gif" />
        <img width="100" src="./assets/imgs/loading-text.png" />
    </div>
    <!-- loading  -->

    <!-- main -->
    <main style="visibility:hidden">
        <!-- banner -->
        <div class="banner">
            <h1>锋团大屏数据可视化平台</h1>
            <span>FENG&nbsp;TUAN&nbsp;BIG&nbsp;DATA</span>
        </div>
        <!-- banner -->


        <!-- title -->
        <div class="title">
            <div class="index" style="background-image: url(./assets/imgs/m-one.png)"></div>
            <div class="desc">
                <p>平台交易数据</p>
                <p>Platform transaction data</p>
            </div>
        </div>
        <!-- title -->
        <!-- buy-data -->
        <div class="buy-data">
            <!-- 数字 -->
            <div class="num">
                <!-- 累计成交额 -->
                <div class="ljcje">
                    <p>累计成交额</p>
                    <p>232,235</p>
                </div>
                <!-- 累计成交额 -->
                <!-- 待收总额 -->
                <div class="dsze">
                    <p>待收总额</p>
                    <p>232,45</p>
                </div>
                <!-- 待收总额 -->
            </div>
            <!-- 数字 -->

            <!-- 📈图表echarts -->
            <div class="echarts1"></div>
            <!-- 📈图表echarts -->

            <!-- 数字 -->
            <div class="num" style="justify-content: center;margin-top:.1rem">
                <!-- 累计成交额 -->
                <div class="ljcje">
                    <p>累计参加人数</p>
                    <p>232,235</p>
                </div>
                <!-- 累计成交额 -->
            </div>
            <!-- 数字 -->

            <!-- 📊图表echarts -->
            <div class="echarts2"></div>
            <!-- 📊图表echarts -->
        </div>
        <!-- buy-data -->



        <!-- title -->
        <div class="title">
            <div class="index" style="background-image: url(./assets/imgs/m-two.png)"></div>
            <div class="desc">
                <p>会员购物占比</p>
                <p>Member buy data</p>
            </div>
        </div>
        <!-- title -->
        <!-- member-buy -->
        <div class="member-buy">
            <div class="echarts3"></div>
            <div class="data">
                <p class="title">老会员购买</p>
                <p class="num">22,339</p>
                <p class="title">非会员购买</p>
                <p class="num">2,134</p>
            </div>
        </div>
        <!-- member-buy -->



        <!-- title -->
        <div class="title">
            <div class="index" style="background-image: url(./assets/imgs/m-three.png)"></div>
            <div class="desc">
                <p>最受欢迎产品TOP5</p>
                <p>🐂NB products data</p>
            </div>
        </div>
        <!-- title -->

        <!-- nb products -->
        <div class="nb-products">
            <div class="echarts4"></div>
        </div>
        <!-- nb products -->

    </main>
    <!-- main -->
    <script src="./assets/js/common-jq.js"></script>
    <script src="./assets/js/common-echarts.js"></script>
    <script src="./assets/js/m-flexible.js"></script>
    <script src="./assets/js/m1.js"></script>
    <script src="./assets/js/m2.js"></script>
    <script src="./assets/js/m3.js"></script>
    <script src="./assets/js/m4.js"></script>
    <script>
        setTimeout(() => {
            $('.loading').css('visibility', 'hidden')
            $('main').css('visibility', 'visible')
        }, 300)
    </script>
</body>

</html>